import { BlockEnum, NodeProps } from '@/components/workflow/types'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { ComponentDescMap } from '../../constants'
import '../style.less'
import { useWorkFlowStore } from '@/store/workflowStore'
import { getCodeDefaultParams } from './default'
import DisplayCont from '../components/DisplayCont'

const CodeNode: FC<NodeProps<any>> = ({ id, data }: any) => {

  const { flowVariables } = useWorkFlowStore()

  const [info, setInfo] = useState({ ...getCodeDefaultParams() })

  useEffect(() => {
    if (flowVariables[data.id]) {
      setInfo({
        ...info,
        ...flowVariables[data.id]
      })
    }
  }, [flowVariables])

  return (
    <div className="workflow-common-node">
      <div className="common-node-desc">{data.desc || ComponentDescMap[BlockEnum.Code]}</div>

      <div className="nodrag mapLLMNode_case cursor-default">
        {info?.inputList?.length > 0 && (
          <DisplayCont title="输入" firstThreeItems={info.inputList.slice(0, 3)} list={info.inputList}></DisplayCont>
        )}
        {info?.outputList?.length > 0 && (
          <DisplayCont title="输出" firstThreeItems={info.outputList.slice(0, 3)} list={info.outputList}></DisplayCont>
        )}
      </div>
    </div>
  )
}

export default React.memo(CodeNode)
